<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="$t('travelAgency.fileManage')"
    width="800px"
    :before-close="handleClose"
  >
    <div style="display: flex; align-items: center">
      <el-upload
        :show-file-list="false"
        :action="action"
        :headers="uploadHeaders"
        name="file"
        :data="{
          resourceType: 1,
          resourceId: props.id
        }"
        accept="*"
        style="display: inline-block; margin-left: 10px"
        :on-success="handleSuccess"
      >
        <el-button type="primary">{{ $t('public.uploadFile') }}</el-button>
      </el-upload>
    </div>
    <BaseTable
      ref="refContentTable"
      v-loading="tableLoading"
      :data="tableData"
      max-height="calc(100vh - 210px)"
      style="margin: 10px 0"
      row-key="id"
    >
      <TableColumn
        prop="fileName"
        :label="$t('travelAgency.fileName')"
        :column-width="routeColumnWidth.fileName"
      />
      <TableColumn
        prop="fileExtension"
        :label="$t('travelAgency.fileType')"
        :column-width="routeColumnWidth.fileExtension"
      />
      <TableColumn
        prop="fileSize"
        :label="$t('travelAgency.fileSize')"
        :column-width="routeColumnWidth.fileSize"
      >
        <template #default="{ row }">
          <span>{{ g_utils.transformByteData(row.fileSize) }}</span>
        </template>
      </TableColumn>
      <TableColumn
        fixed="right"
        prop="action"
        :label="$t('public.action')"
        :column-width="routeColumnWidth.action"
      >
        <template #default="{ row, $index }">
          <el-button text @click="handleDownload(row, $index)">
            {{ $t('public.download') }}
          </el-button>
          <el-button text @click="handleDelete(row, $index)">{{
            $t('public.delete')
          }}</el-button>
        </template>
      </TableColumn>
    </BaseTable>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import { getUmsToken } from '@/utils/cookies'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const action = ref(import.meta.env.VITE_APP_BASE_API + '/file/upload')
const uploadHeaders = ref({
  Authorization: 'Bearer' + ' ' + getUmsToken(),
  lang: g_https.headersLang(),
  timeout: 10000
})
const refContentTable = ref(null)
const tableLoading = ref(false)
const tableData = ref([])
const routeColumnWidth = ref({})

watch(
  () => tableData.value,
  nv => {
    nextTick(() => {
      useTableColumnWidth({
        refTable: refContentTable.value
      }).getTableColumnWidth(data => {
        routeColumnWidth.value = data
      })
    })
  },
  {
    immediate: true,
    deep: true
  }
)

onMounted(() => {
  getTableData()
})

const getTableData = _ => {
  tableLoading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiFileList({ resourceId: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
}

const handleClose = _ => {
  dialogVisible.value = false
}

const handleSuccess = res => {
  console.log('handleSuccess', res)
  if (res.code === '200' && res.data) {
    ElMessage.success(res.message)
    getTableData()
  }
}

const handleDownload = row => {
  tableLoading.value = true
  g_api.travelAgency
    .apiFileDownload({
      fileId: row.id
    })
    .then(res => {
      if (res.code === '200' && res.data) {
        window.open(res.data)
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
}

const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      tableLoading.value = true
      g_api.travelAgency
        .apiFileDelete({
          fileId: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            getTableData()
          }
        })
        .finally(() => {
          tableLoading.value = false
        })
    })
    .catch(() => {})
}
</script>

<style scoped lang="scss"></style>
